<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="margin: auto;width:50%;font-size: 24px;">
        <input type="text" id="in"> <button id="btn">转换</button>
    <br><br>
    <textarea name="" id="show" cols="50" rows="50"></textarea>
    </div>
    <script>
        var btn=document.getElementById('btn')
        var txt=document.getElementById('in')
        var show=document.getElementById('show')
        var macdot=/[0-9a-fA-F]{4}\.[0-9a-fA-F]{4}\.[0-9a-fA-F]{4}/
        var macdash=/([0-9a-fA-F]{2}\-){5}[0-9a-fA-F]{2}/
        var maccolon=/([0-9a-fA-F]{2}:){5}[0-9a-fA-F]{2}/
        btn.addEventListener('click',e=>{
            let mac=txt.value
            if(macdot.test(mac)){
                mac=mac.replace(/\./g,'')
                dashmac=mac.slice(0,2)+'-'+mac.slice(2,4)+'-'+mac.slice(4,6)+'-'+mac.slice(6,8)+'-'+mac.slice(8,10)+'-'+mac.slice(10,12)
                colonmac=mac.slice(0,2)+':'+mac.slice(2,4)+':'+mac.slice(4,6)+':'+mac.slice(6,8)+':'+mac.slice(8,10)+':'+mac.slice(10,12)
                show.value='\n\n'+dashmac+'\n\n'+colonmac
            }else if(macdash.test(mac)){
                colonmac=mac.replace(/\-/g,':')
                mac=mac.replace(/\-/g,'')
                dotmac=mac.slice(0,4)+'.'+mac.slice(4,8)+'.'+mac.slice(8,12)
                show.value='\n\n'+dotmac+'\n\n'+colonmac
            }else if(maccolon.test(mac)){
                dashmac=mac.replace(/:/g,'-')
                mac=mac.replace(/:/g,'')
                dotmac=mac.slice(0,4)+'.'+mac.slice(4,8)+'.'+mac.slice(8,12)
                show.value='\n\n'+dotmac+'\n\n'+dashmac
            }
        })
    </script>
</body>
</html>